<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../pages/template.xhtml">
	<ui:define name="head">
		<title>#{msg.usuarios}</title>
	</ui:define>
	<ui:define name="left"></ui:define>
	<ui:define name="center">
		<h:form prependId="false" styleClass="formPrincipal">
			<p:growl id="msgs" showDetail="true" />
			<!-- Mirar el p:collector -->
			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="../images/loading.gif" />
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<p:panel header="#{msg.nuevoUsuario}" id="nuevo">
				<h:panelGrid columns="2">
					<h:outputLabel value="#{msg.dni}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.dniPassaporte}"
						style="margin-left: 28px;"></p:inputText>
				</h:panelGrid>
				<h:panelGrid columns="8">
					<h:outputLabel value="#{msg.nombre}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.nombre}"></p:inputText>
					<h:outputLabel value="#{msg.apellidos}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.apellidos}"></p:inputText>
					<h:outputLabel value="#{msg.direccion}:"></h:outputLabel>
					<p:inputText style="width:260px;"
						value="#{usuariosBean.newUsuario.direccion}"></p:inputText>
					<h:outputLabel value="#{msg.telefono}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.telefono}"></p:inputText>
					<h:outputLabel value="#{msg.fechaNacimiento}:"></h:outputLabel>
					<p:calendar effect="explode" locale="es" navigator="true"
						value="#{usuariosBean.fechaNacimiento}" pattern="dd/MM/yyyy"
						yearRange="c-99:c" style="font-size: 15px;" size="14" />
					<h:outputLabel value="#{msg.lugarNacimiento}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.lugarNacimiento}"></p:inputText>
					<h:outputLabel value="#{msg.sexo}:"></h:outputLabel>
					<p:panel>
						<p:selectOneRadio value="#{usuariosBean.newUsuario.sexo}">
							<f:selectItem itemValue="Hombre" itemLabel="#{msg.hombre}" />
							<f:selectItem itemValue="Mujer" itemLabel="#{msg.mujer}" />
						</p:selectOneRadio>
					</p:panel>
					<h:outputLabel value="#{msg.fechaLlegada}:"></h:outputLabel>
					<p:calendar effect="explode" locale="es" navigator="true"
						value="#{usuariosBean.fechaLLegada}" pattern="dd/MM/yyyy"
						yearRange="c-99:c" style="font-size: 15px;" size="14" >
					</p:calendar>
					<h:outputLabel value="#{msg.nacinalidad}:"></h:outputLabel>
					<p:inputText value="#{usuariosBean.newUsuario.nacionalidad}"></p:inputText>
					<h:outputLabel value="#{msg.empadronado}:"></h:outputLabel>
					<p:selectBooleanCheckbox
						value="#{usuariosBean.newUsuario.empadronado}" />
					<h:outputLabel value="#{msg.documentacion}:"></h:outputLabel>
					<p:selectOneMenu value="#{usuariosBean.newUsuario.documentacion}"
						effect="drop">
						<f:selectItem itemLabel="#{msg.seleccionOpcion}" itemValue="" />
						<f:selectItem itemLabel="#{msg.si}" itemValue="Si" />
						<f:selectItem itemLabel="#{msg.no}" itemValue="No" />
						<f:selectItem itemLabel="#{msg.comunitario}"
							itemValue="Comunitario" />
					</p:selectOneMenu>
				</h:panelGrid>
				<p:commandButton value="#{msg.guardar}"
					action="#{usuariosBean.addUsuario}"
					update="usuarios, usuariosList,msgs,menuUsuario,nuevo">
					<p:collector value="#{usuariosBean.newUsuario}"
						addTo="#{usuariosBean.usuarios}" />
				</p:commandButton>
				<p:commandButton value="#{msg.limpiar}" type="reset"></p:commandButton>
			</p:panel>
			<p:panel header="#{msg.listadoUsuarios}" style="margin-top: 10px;"
				id="usuariosList">
				<p:contextMenu for="usuarios" id="menuUsuario">
					<p:menuitem value="#{msg.editarUsuario}"
						action="#{usuariosBean.mostrarUsuario}" />
					<p:menuitem value="#{msg.eliminarUsuario}"
						oncomplete="confirmDelete.show();" update="usuarios" />
					<p:menuitem value="#{msg.verExpediente}"
						action="#{usuariosBean.mostrarExpediente}" />
					<p:menuitem value="#{msg.itinerario}"
						action="#{usuariosBean.generarItinerario}"
						oncomplete="confirmacionItinerario.show();" />
				</p:contextMenu>
				<p:dataTable id="usuarios" value="#{usuariosBean.usuarios}"
					var="usuarioVar" selection="#{usuariosBean.selectedUsuario}"
					rowKey="#{usuarioVar.idUsuario}" selectionMode="single"
					rowSelectListener="#{usuariosBean.filaSeleccionada}"
					rowUnselectListener="#{usuariosBean.filaDeseleccionada}"
					emptyMessage="#{msg.tablaVacia}" update="menuUsuario"
					paginator="true" rows="20">
					<p:column headerText="#{msg.dni}" style="width:125px"
						filterBy="#{usuarioVar.dniPassaporte}">
						<h:outputText value="#{usuarioVar.dniPassaporte}" />
					</p:column>
					<p:column headerText="#{msg.nombre}" style="width:125px"
						filterBy="#{usuarioVar.nombre}">
						<h:outputText value="#{usuarioVar.nombre}" />
					</p:column>
					<p:column headerText="#{msg.apellidos}" style="width:125px"
						filterBy="#{usuarioVar.apellidos}">
						<h:outputText value="#{usuarioVar.apellidos}" />
					</p:column>
					<p:column headerText="#{msg.direccion}" style="width:125px">
						<h:outputText value="#{usuarioVar.direccion}" />
					</p:column>
					<p:column headerText="#{msg.telefono}" style="width:125px">
						<h:outputText value="#{usuarioVar.telefono}" />
					</p:column>
					<p:column headerText="#{msg.fechaNacimiento}" style="width:125px">
						<h:outputText value="#{usuarioVar.fechaNacimiento}" />
					</p:column>
					<p:column headerText="#{msg.sexo}" style="width:125px"
						filterBy="#{usuarioVar.sexo}">
						<h:outputText value="#{usuarioVar.sexo}" />
					</p:column>
					<p:column headerText="#{msg.nacinalidad}" style="width:125px"
						filterBy="#{usuarioVar.nacionalidad}">
						<h:outputText value="#{usuarioVar.nacionalidad}" />
					</p:column>
					<p:column headerText="#{msg.documentacion}" style="width:125px"
						filterBy="#{usuarioVar.documentacion}">
						<h:outputText value="#{usuarioVar.documentacion}" />
					</p:column>
				</p:dataTable>
				<p:confirmDialog id="confirmDialog" message="#{msg.mensajeUsuario}"
					header="atencion" severity="alert" widgetVar="confirmDelete"
					modal="true">
					<p:commandButton value="#{msg.si}"
						action="#{usuariosBean.deleteUsuario}"
						update="usuarios, usuariosList,msgs,menuUsuario"
						oncomplete="confirmDelete.hide();" />
					<p:commandButton value="#{msg.no}" onclick="confirmDelete.hide();"
						type="button" />
				</p:confirmDialog>
				<p:dialog id="confirmacionItinerario" header="atencion"
					severity="alert" widgetVar="confirmacionItinerario" modal="true">
					<h:outputLabel value="#{msg.mensajeItinerario}"></h:outputLabel>
					<br />
					<p:commandButton value="#{msg.ok1}"
						onclick="confirmacionItinerario.hide();" type="button"
						style="float:right;" />
				</p:dialog>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>